<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <title>The List of People</title>
    <s:head/>

<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css">

<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>

<!-- OPTIONAL: JSON Utility (for DataSource) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>

<!-- OPTIONAL: Connection Manager (enables XHR for DataSource) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>

<!-- OPTIONAL: Get Utility (enables dynamic script nodes for DataSource) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/get/get-min.js"></script>

<!-- OPTIONAL: Drag Drop (enables resizeable or reorderable columns) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>

<!-- OPTIONAL: Calendar (enables calendar editors) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script>

<!-- Source files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js"></script>

<script type="text/javascript">
var myColumnDefs = [ 
    {key:"id", label:"Person ID", sortable: true}, 
    {key:"name", label:"Person Name", sortable: true}, 
    {key:"favoriteColor", label:"Favorite Color", sortable: true},
    {key:"postalCode", label:"Zip Code", sortable: true} 
];

var myDataSource = new YAHOO.util.DataSource("<s:url value="/person-list" />"); 
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
myDataSource.connXhrMode = "queueRequests"; 
myDataSource.responseSchema = { 
    resultsList : "results", 
    fields : [ 
        { key: "id" }, 
        { key: "name" }, 
        { key: "favoriteColor" },
        { key: "postalCode" } 
    ]};

YAHOO.util.Event.addListener(window, "load", function() { 
	    var myDataTableDeferred = new YAHOO.widget.DataTable("theList", myColumnDefs, myDataSource); 
	}); 
</script>

</head>

<body class="yui-skin-sam">

<h2>The List of People in the Database</h2>

<div id="theList"></div>

</body>
</html>